<template>
    <scroll-view scroll-x="true" class="nav" :scroll-into-view="navbarsId">
        <view v-for="(item, index) in navbars" :key="index" :id="'tab' + index"
            :class="['tabs', { 'text-white': currentIndex == index }]" @click="changeTab(index)">
            {{ $t(`transaction.${item.title}`) }}
            <view class="line" v-if="currentIndex == index"></view>
        </view>
        <view class="shipping" v-if="currentIndex == 1">
            <view @click="show = true">
                {{ isCommon ? $t('transaction.sort.common') : $t('transaction.sort.redStock') }}
            </view>
            <view>
                <image class="tangle-right" src="../../static/icon/tangle-right.png" mode="" />
            </view>
        </view>
    </scroll-view>
    <view class="scroll-box">
        <swiper :autoplay="false" :duration="250" :current="currentIndex" @change="changeIndex"
            :style="'height:' + 100 + 'vh'" class="swiperBox">
            <swiper-item v-for="(item, index) in navbars" :key="index" class="swiper-item">
                <scroll-view scroll-y="true" :style="'height:' + 100 + 'vh'">
                    <!-- 申购 -->
                    <template v-if="item.title == 'shengou'">
                        <view v-for="(ele, i) in userApplyList" :key="i" class="itemBox item1">
                            <view class="first-line">
                                <view class="left">
                                    <view class="stock-name">{{ ele.stockName }}</view>
                                    <view class="stock-code">{{ ele.stockCode }}</view>
                                </view>
                                <view class="right">
                                    <!-- 0: 进行中; 1: 中签: 2: 未中签 -->
                                    <image class="pass-or-unpass" :src="`../../static/icon/stock${ele.status}.png`"
                                        mode="" />
                                    <view class="state">{{ $t(`transaction.status${ele.status}`) }}</view>
                                </view>
                            </view>
                            <view class="second-line">
                                <view class="stockPrice">
                                    <view class="key">{{ $t('transaction.price') }}：</view>
                                    <view class="value">{{ ele.applyPrice }}</view>
                                </view>
                                <view class="getPoint">
                                    <view class="key">{{ $t('transaction.status1') }}：</view>
                                    <view class="value">{{ ele.status }}</view>
                                </view>
                                <!-- <view class="rengjiao">
                                    <view class="key">{{ $t('transaction.subscription') }}：</view>
                                    <view class="value">{{ ele.rengjiao }}</view>
                                </view> -->
                                <view class="shengouliang">
                                    <view class="key">{{ $t('transaction.shengounum') }}：</view>
                                    <view class="value">{{ ele.applyNum }}</view>
                                </view>
                            </view>
                        </view>
                    </template>

                    <!-- 持仓 进行中-->
                    <template v-if="item.title == 'jingxingzhong' && currStockIndex == 0">
                        <view v-for="(ele, i) in userApplyListIng" :key="i" class="item2">
                            <view class="first-line" @click="showToast(ele)">
                                <view class="left">
                                    <view class="stock-name">{{ ele.stockName }}</view>
                                    <view class="stock-code">{{ ele.stockCode }}</view>
                                </view>
                                <view class="right">
                                    <image class="pass-or-unpass" src="../../static/icon/shalou.png" mode="" />
                                    <view class="state">{{ ele.pointState == 0 ? $t('transaction.close-position') :
                                        $t('transaction.in-shareholding') }}</view>
                                </view>
                            </view>
                            <view :class="['second-line', { 'show': ele.isOpen == 0 }]">
                                <!-- 与市场比对 -->
                                <view class="market-env">
                                    <view :class="['key nowPrice', ele.rate >= 0 ? 'red' : 'green']">
                                        {{ ele.nowPrice }}
                                    </view>
                                    <view :class="['value', ele.rate >= 0 ? 'red' : 'green']">
                                        <view class="in-or-de">{{ ele.isMinus }}</view>
                                        <view class="rate">{{ `${ele.rate} %` }}</view>
                                    </view>
                                </view>
                                <!-- 价格 -->
                                <view class="stockPrice view">
                                    <view class="key">{{ $t('transaction.price') }}：</view>
                                    <view class="value">{{ ele.buyPrice }}</view>
                                </view>
                                <!-- 持有 -->
                                <view class="getPoint view">
                                    <view class="key">{{ $t('transaction.haveStock') }}：</view>
                                    <view class="value">{{ `${ele.num}${$t("information.profit.number")}` }}</view>
                                </view>
                                <!-- 成本 -->
                                <view class="rengjiao view">
                                    <view class="key">{{ $t('transaction.chengben') }}：</view>
                                    <view class="value">{{ ele.buyPrice }}</view>
                                </view>
                                <!-- 市值 marketPrice -->
                                <view class="shengouliang view">
                                    <view class="key">{{ $t('transaction.city-value') }}：</view>
                                    <view class="value">{{ ele.marketPrice }}</view>
                                </view>
                            </view>
                            <view class="switch" @click="switchBtn(index, i)">
                                <image :class="['bottom-top', { 'rotate-180deg': ele.isOpen == 0 }]"
                                    src="../../static/icon/bottom-top.png" mode="" />
                            </view>
                        </view>
                    </template>
                    <!-- 持仓 进行中-->
                    <template v-if="item.title == 'jingxingzhong' && currStockIndex == 1">
                        <view v-for="(ele, i) in userRedApplyListIng" :key="i" class="item2">
                            <view class="first-line" @click="showToast(ele)">
                                <view class="left">
                                    <view class="stock-name">{{ ele.stockName }}</view>
                                    <view class="stock-code">{{ ele.stockCode }}</view>
                                </view>
                                <view class="right">
                                    <image class="pass-or-unpass" src="../../static/icon/shalou.png" mode="" />
                                    <view class="state">{{ ele.status == 0 ? $t('transaction.close-position') :
                                        $t('transaction.in-shareholding') }}</view>
                                </view>
                            </view>
                            <view :class="['second-line', { 'show': ele.isOpen == 0 }]">
                                <!-- 与市场比对 -->
                                <view class="market-env">
                                    <view :class="['key nowPrice', ele.profitAndLose >= 0 ? 'red' : 'green']">
                                        {{ ele.nowPrice }}
                                    </view>
                                    <view :class="['value', ele.profitAndLose >= 0 ? 'red' : 'green']">
                                        <!-- <view class="in-or-de">{{ ele.isMinus }}</view> -->
                                        <view class="rate">{{ `${ele.rate} %` }}</view>
                                    </view>
                                </view>
                                <!-- 買入价格 紅利 -->
                                <view class="stockPrice view">
                                    <view class="key">{{ $t('transaction.redPrice') }}：</view>
                                    <view class="value">{{ ele.buyPrice }}</view>
                                </view>
                                <!-- 持有 -->
                                <view class="getPoint view">
                                    <view class="key">{{ $t('transaction.haveStock') }}：</view>
                                    <view class="value">{{ `${ele.buyNum}${$t("information.profit.number")}` }}</view>
                                </view>
                                <!-- 成本 -->
                                <!-- <view class="rengjiao view">
                                    <view class="key">{{ $t('transaction.chengben') }}：</view>
                                    <view class="value">{{ ele.buyPrice }}</view>
                                </view> -->
                                <!-- 市值 marketPrice -->
                                <!-- <view class="shengouliang view">
                                    <view class="key">{{ $t('transaction.city-value') }}：</view>
                                    <view class="value">{{ ele.marketPrice }}</view>
                                </view> -->
                            </view>
                            <view class="switch" @click="switchRedBtn(index, i)">
                                <image :class="['bottom-top', { 'rotate-180deg': ele.isOpen == 0 }]"
                                    src="../../static/icon/bottom-top.png" mode="" />
                            </view>
                        </view>
                    </template>
                    <template v-if="item.title == 'yizhongzhi'">
                        <view v-for="(ele, i) in item.lists" :key="i" class="itemBox">
                            3
                        </view>
                    </template>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
    <view class="height"></view>
    <!-- 弹窗 -->
    <view class="toast" v-if="isShow">
        <view class="out">
            <!-- 遮罩层 -->
            <view class="mask" @click="closeToast"></view>
            <view class="container">
                <view class="box">
                    <image src="../../static/icon/close.png" class="close" mode="" @click="closeToast" />
                    <view class="key onSale" @click="onSale">{{ $t('transaction.onsale') }}</view>
                    <view class="key detail" @click="routerGoDetail" v-if="currStockIndex == 0">{{ $t('transaction.detail') }}</view>
                    <!-- <view class="key detail" v-if="currStockIndex == 1">{{ $t('transaction.detail') }}</view> -->
                    <!--  @click="routerGoDetail" -->
                </view>
            </view>
        </view>
    </view>
    <!-- tips -->
    <view class="tips" v-if="isTips">
        <view class="out">
            <!-- 遮罩层 -->
            <view class="mask" @click="cancel"></view>
            <view class="container">
                <view class="box">
                    <image src="../../static/icon/close.png" class="close" mode="" @click="cancel" />
                    <view class="tips-title">{{ $t('transaction.confirm-bool') }}</view>
                    <view class="key cancel" @click="cancel">{{ $t('cancel') }}</view>
                    <view class="key confirm" @click="confirm('red')" v-if="currStockIndex == 1">{{ $t('confirm') }}</view>
                    <view class="key confirm" @click="confirm" v-else>{{ $t('confirm') }}</view>
                </view>
            </view>
        </view>
    </view>
    <u-picker v-model="show" mode="selector" :default-selector="[currStockIndex]" v-if="currentIndex == 1"
        :range="[$t('transaction.sort.common'), $t('transaction.sort.redStock')]" @confirm="selectStock"
        @cancel="selectStock">
    </u-picker>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { requestApi } from '@/api';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { formateDate } from '@/utils/formatter';
import { Decimal } from 'decimal.js';
import { toast } from '@/utils/storage';

const _this = getCurrentInstance().appContext.config.globalProperties
// 滑块切换
function changeIndex(e) {
    currentIndex.value = e.detail.current
}

function changeTab(index) {
    if (currentIndex.value == index) return
    currentIndex.value = index
    if (currentIndex.value < 6) {
        navbarsId.value = 'tab' + index
    }
}
// 控制卡片开合 0 打开 1 关闭
function switchBtn(index, i) {
    let isOpen = userApplyListIng.value[i].isOpen
    if (isOpen == 0) {
        userApplyListIng.value[i].isOpen = 1
    } else {
        userApplyListIng.value[i].isOpen = 0
    }
}
function switchRedBtn(index, i) {
    let isRedOpen = userRedApplyListIng.value[i].isOpen
    if (isRedOpen == 0) {
        userRedApplyListIng.value[i].isOpen = 1
    } else {
        userRedApplyListIng.value[i].isOpen = 0
    }
}

const navbarsId = ref('')
const navbars = ref([
    {
        title: 'shengou',
    },
    {
        title: 'jingxingzhong',
    },
    // {
    //     title: 'yizhongzhi'
    // },
])
const userApplyList = ref([])
const currentIndex = ref(0)
// 获取申购信息
async function getUserApplyListByUid() {
    const { status, data, code } = await requestApi.getUserApplyListByUid()
    if (code && code == 401) {
        uni.navigateTo({
            url: '/pages/login/login'
        });
    } else {
        if (status == 0) {
            userApplyList.value = data.map((item) => {
                let code = item.stockCode
                item.stockCode = code.match(/^[^\.]+/)[0]
                return item
            })
        }
    }
}
// isCommon
const isCommon = ref(true)
const show = ref(false)
const currStockIndex = ref(0)
const currStock = ref(0)
// 用户持仓
const userApplyListIng = ref([]) //进行中
const userRedApplyListIng = ref([]) //进行中
// 切换股票类型
function selectStock(e) {
    currStockIndex.value = e[0]
    isCommon.value = !isCommon.value
    e[0] == 0 && getUserPositionInfo()
    e[0] == 1 && getUserRedStockPosition()
}
async function getUserRedStockPosition() {
    const { data, status } = await requestApi.getUserRedStockPosition()
    if (status == 0) {
        userRedApplyListIng.value = data.list.map(item => {
            let {
                stockCode,// 股票代码
            } = item
            //     // 市值 价格 * 持有
            item.stockCode = stockCode.match(/^[^\.]+/)[0]// 股票代码
            item.isOpen = 1
            //     item.isMinus = buyPrice.minus(nowPrice) // 差价
            return item
        })
        // console.log(data);
    }
}
async function getUserPositionInfo() {
    const { data, status } = await requestApi.getUserPositionInfo()
    if (status == 0) {
        userApplyListIng.value = data.map(item => {
            let {
                nowPrice,    // 价格 市场价格
                // buyPrice,// 成本 买时价格
                num,// 持有 买了多少股
                // stockName,// 名称
                stockCode,// 股票代码
                buyPrice,
            } = item
            // 市值 价格 * 持有
            buyPrice = new Decimal(buyPrice)
            nowPrice = new Decimal(nowPrice)
            item.rate = ((nowPrice.dividedBy(buyPrice)).minus(1)).times(100).toFixed(2)
            item.stockCode = stockCode.match(/^[^\.]+/)[0]// 股票代码
            item.marketPrice = nowPrice.times(num)
            item.pointState = 1
            item.isOpen = 1
            item.isMinus = buyPrice.minus(nowPrice) // 差价
            return item
        })
        // console.log(userApplyListIng.value);

    }
}
// 弹窗
const isShow = ref(false)
const currentObj = ref(null)
function showToast(obj) {
    isShow.value = true
    currentObj.value = obj
}
function closeToast(bool = false) {
    // 默认清除
    if (!bool) {
        currentObj.value = null
        console.log(123);
    }
    isShow.value = false
}
// 现卖
const isTips = ref(false)
function onSale() {
    closeToast(true)
    isTips.value = true
}
function cancel() {
    isShow.value = true
    isTips.value = false
}
function confirm(str) {
    if (str && str == 'red') {
        sellRedStock()
    } else {
        userSell()
    }
    isTips.value = false
    closeToast()
}
async function userSell() {
    const { status, msg } = await requestApi.sell({
        positionSn: currentObj.value.positionSn
    })
    if (status == 0) {
        toast(msg, 'none', 2000)
    } else {
        toast(msg)
    }
    getUserApplyListByUid()
    getUserPositionInfo()
    getUserRedStockPosition()
    // console.log(res);
}
async function sellRedStock() {
    const { status, msg } = await requestApi.sellRedStock({
        id: currentObj.value.id
    })
    if (status == 0) {
        toast(msg, 'none', 2000)
    } else {
        toast(msg)
    }
    getUserApplyListByUid()
    getUserPositionInfo()
    getUserRedStockPosition()
    // console.log(res);
}
// 路由跳转
function routerGoDetail() {
    return uni.navigateTo({
        url: `/pages/transaction-detail/transaction-detail?obj=${JSON.stringify(currentObj.value)}`,
        success: () => {
            closeToast()
        }
    })
}

onLoad(() => {
    getUserApplyListByUid()
    getUserPositionInfo()
    getUserRedStockPosition()
})
onShow(() => {
    getUserApplyListByUid()
    getUserPositionInfo()
    getUserRedStockPosition()
})
</script>

<style lang="scss">
page {
    background-color: $uni-bg-color-dark;
}

.nav {
    color: #7E8394;
    // #ifndef H5
    padding: 88rpx 66rpx 0rpx;
    // #endif
    padding: 0rpx 66rpx 0rpx;
    height: 88rpx;
    position: fixed;
    top: 0rpx;
    z-index: 99;
    background-color: #191A22;


    .tabs {
        display: inline-block;
        vertical-align: middle;
        height: 50rpx;
        line-height: 50rpx;
        margin-right: 48rpx;
        position: relative;
        transition: all .25s;
    }

    .line {
        position: absolute;
        left: calc(50% - 16rpx);
        bottom: 0rpx;
        border-radius: 65rpx;
        width: 32rpx;
        height: 6rpx;
        background-color: #fff;
        transition: all .25s;
    }

    .shipping {
        color: #fff;
        margin-left: auto;
        align-items: center;
        display: flex;
        position: fixed;
        z-index: 100;
        top: 44rpx;
        transform: translateY(-32rpx);
        right: 20rpx;
    }

    .tangle-right {
        width: 13rpx;
        height: 24rpx;
        margin-left: 4rpx;
        vertical-align: middle;
    }
}


.swiperBox {
    // #ifndef H5
    padding-top: 176rpx;
    // #endif
    padding-top: 88rpx;

    .swiper-item {
        color: #fff;

        .item1 {
            position: relative;
            background-color: #20212A;
            width: 670rpx;
            height: 230rpx;
            border-radius: 45rpx;
            margin: 32rpx auto 0rpx;
            padding-top: 15rpx;
            padding-bottom: 25rpx;

            .first-line {
                display: flex;
                padding-left: 28rpx;
                padding-right: 44rpx;
                align-items: center;

                .left {
                    .stock-name {
                        font-size: 32rpx;
                    }

                    .stock-code {
                        font-size: 24rpx;
                        color: #7E8394;
                    }
                }

                .right {
                    margin-left: auto;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    .pass-or-unpass {
                        width: 57rpx;
                        height: 57rpx;
                        margin-bottom: 8rpx;
                    }

                    .state {
                        font-size: 24rpx;
                        color: #7E8394;
                    }
                }
            }

            .second-line {
                display: flex;
                justify-content: space-between;
                margin-top: 30rpx;
                margin-left: 50rpx;
                margin-right: 68rpx;

                .key {
                    color: #7E8394;
                    font-size: 20rpx;
                }

            }
        }

        .item2 {
            position: relative;
            background-color: #20212A;
            width: 670rpx;
            // height: 230rpx;
            border-radius: 45rpx;
            margin: 32rpx auto 0rpx;
            padding-top: 15rpx;

            .first-line {
                display: flex;
                padding-left: 28rpx;
                padding-right: 44rpx;
                align-items: center;

                .left {
                    .stock-name {
                        font-size: 32rpx;
                    }

                    .stock-code {
                        font-size: 24rpx;
                        color: #7E8394;
                    }
                }

                .right {
                    margin-left: auto;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    .pass-or-unpass {
                        width: 57rpx;
                        height: 57rpx;
                        margin-bottom: 8rpx;
                    }

                    .state {
                        font-size: 24rpx;
                        color: #7E8394;
                    }
                }
            }

            .second-line {
                display: flex;
                justify-content: space-between;
                margin-top: 30rpx;
                margin-left: 50rpx;
                margin-right: 68rpx;
                flex: 1;
                height: 0;
                overflow: hidden;
                transition: all .25s;

                .view {
                    display: flex;
                    flex-direction: column;
                    align-items: baseline;
                    justify-content: center;

                    .key {
                        color: #7E8394;
                        font-size: 20rpx;
                    }
                }

                .market-env {
                    .key {
                        font-size: 40rpx;
                        text-align: center;
                    }

                    .value {
                        display: flex;
                        font-size: 20rpx;
                        align-items: center;
                        justify-content: space-around;

                        view {
                            transform: scale(0.8);
                        }
                    }
                }

                .red {
                    color: #F04848 !important;
                }

                .green {
                    color: #22A875 !important;
                }
            }

            .switch {
                text-align: center;

                .bottom-top {
                    transition: all .25s;
                    width: 24rpx;
                    height: 13rpx;
                    margin: 8rpx auto;
                }
            }

        }
    }
}

.height {
    height: 130rpx;
}

.rotate-180deg {
    transform: rotate(180deg);
}

.show {
    height: 88rpx !important;
}

.toast {
    position: fixed;
    top: 0rpx;
    left: 0rpx;
    z-index: 999;
    width: 100%;
    height: 100%;

    .mask {
        background-color: rgba(0, 0, 0, .4);
        width: 100%;
        height: 100%;
    }

    .out {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .container {
        width: 525rpx;
        height: 275rpx;
        background-color: #292A36;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 40rpx;
        overflow: hidden;

        .box {
            width: 100%;
            height: 100%;
            position: relative;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .close {
                width: 50rpx;
                height: 50rpx;
                position: absolute;
                right: 30rpx;
                top: 33rpx;
                z-index: 999;
            }

            .key {
                width: 100%;
                text-align: center;
                height: 80rpx;
                line-height: 80rpx;
                margin-top: 20rpx;
            }


        }
    }
}



.tips {
    position: fixed;
    top: 0rpx;
    left: 0rpx;
    z-index: 999;
    width: 100%;
    height: 100%;

    .mask {
        background-color: rgba(0, 0, 0, .4);
        width: 100%;
        height: 100%;
    }

    .out {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .container {
        width: 525rpx;
        height: 250rpx;
        background-color: #292A36;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 40rpx;
        overflow: hidden;

        .box {
            width: 100%;
            height: 100%;
            position: relative;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .close {
                width: 50rpx;
                height: 50rpx;
                position: absolute;
                right: 30rpx;
                top: 33rpx;
                z-index: 999;
            }

            .key {
                width: 168rpx;
                height: 56rpx;
                border-radius: 130rpx;
                text-align: center;
                line-height: 56rpx;
                margin-top: 70rpx;
            }

            .confirm {
                margin-right: 50rpx;
                background-color: #2D7DFC;
            }

            .cancel {
                margin-left: 50rpx;
            }

            .tips-title {
                position: absolute;
                top: 43rpx;
                left: 50%;
                transform: translateX(-50%);
            }

        }
    }
}


.v-enter-active,
.v-leave-active {
    transition: opacity 0.25s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}
</style>
